<template>
  <u-sticky v-if="displayCustomNavbar" :custom-nav-height="0">
    <view>
      <view class="navbar">
        <view class="navbar-fixed">
          <!-- 状态栏 -->
          <view :style="{ height: statusBarHeight + 'px' }" />

          <view :style="{ height: navBarHeight + 'rpx' }" class="navbar--">
            <view class="navigation">
              <!-- 左侧图标 -->
              <view @click="skipPage('left')" v-if="leftIcon" class="iconfont icon-fanhui"> </view>
              <view v-else></view>
              <!-- 标题 -->
              <view class="title">{{ title }}</view>
              <!-- 右侧 -->
              <view v-if="rightIcon && permissionCode" class="iconfont" :class="rightIcon" @click="skipPage('right')" />
              <view v-if="rightText && permissionCode" @click="skipPage('right')">
                {{ rightText }}
              </view>
              <view v-if="(!rightText && !rightIcon) || !permissionCode" class="no-right" />
            </view>
          </view>
        </view>
      </view>
      <slot name="search"></slot>
    </view>
  </u-sticky>
</template>
<script setup lang="ts">
const $emit = defineEmits(["rightClick"]);

defineProps({
  title: {
    type: String,
    default: ""
  },
  // 是否有权限
  permissionCode: {
    type: Boolean,
    default: true
  },
  // 是否显示左侧图标
  leftIcon: {
    type: Boolean,
    default: true
  },
  // 右侧图标
  rightIcon: {
    type: String,
    default: ""
  },
  // 右侧文字
  rightText: {
    type: String,
    default: ""
  },
  // 左侧图标地址
  leftPath: {
    type: String,
    default: ""
  }
});
let statusBarHeight = ref(0);
let navBarHeight = ref(80);
// 是否显示导航栏
let displayCustomNavbar = ref(false);

onBeforeMount(() => {
  init();
});

const init = () => {
  // 是否是pc端
  displayCustomNavbar.value = verifyPc();

  // 是否是APP端
  //  #ifdef APP-PLUS
  displayCustomNavbar.value = true;
  //  #endif
  // 只在 APP或者PC端显示导航栏
  if (!displayCustomNavbar.value) return;

  // 获取手机系统信息
  const info = uni.getSystemInfoSync();
  // 设置状态栏高度
  statusBarHeight.value = info.statusBarHeight;
};

// 页面跳转
const skipPage = (flag: "left" | "right") => (flag === "left" ? uni.navigateBack() : $emit("rightClick"));
</script>

<style lang="scss" scoped src="./index.scss"></style>
